<sqx-layout innerWidth="55" layout="main" titleIcon="settings" titleText="i18n:common.settings">
    <ng-container>
        <sqx-list-view innerWidth="55rem">
            <ng-container content>
                <form [formGroup]="updateForm.form" (ngSubmit)="save()">
                    <h5>{{ "apps.generalSettings" | sqxTranslate }}</h5>

                    <div class="card mb-4">
                        <div class="card-body">
                            <sqx-form-error [error]="updateForm.error | async" />
                            <div class="form-group">
                                <label for="name">{{ "common.name" | sqxTranslate }}</label>
                                <sqx-control-errors for="name" />
                                <input class="form-control" id="name" formControlName="name" maxlength="100" />
                                <sqx-form-hint> {{ "teams.teamNameHint" | sqxTranslate }} </sqx-form-hint>
                            </div>
                        </div>

                        <div class="card-footer">
                            <button class="float-end btn btn-primary" [disabled]="!isEditable" type="submit">
                                {{ "common.save" | sqxTranslate }}
                            </button>
                        </div>
                    </div>
                </form>

                <h5>{{ "apps.generalSettingsDangerZone" | sqxTranslate }}</h5>

                <div class="card card-body">
                    <div class="row">
                        <div class="col">
                            <h5>{{ "teams.delete" | sqxTranslate }}</h5>
                            <sqx-form-hint> {{ "teams.deleteWarning" | sqxTranslate }} </sqx-form-hint>
                        </div>

                        <div class="col-auto">
                            <button
                                class="btn btn-danger"
                                confirmText="i18n:teams.deleteConfirmText"
                                confirmTitle="i18n:teams.deleteConfirmTitle"
                                [disabled]="!isDeletable"
                                (sqxConfirmClick)="deleteTeam()"
                                type="button">
                                {{ "teams.delete" | sqxTranslate }}
                            </button>
                        </div>
                    </div>
                </div>
            </ng-container>
        </sqx-list-view>
    </ng-container>
    <ng-template sidebarMenu>
        <div class="panel-nav">
            <a
                class="panel-link"
                attr.aria-label="{{ 'common.history' | sqxTranslate }}"
                queryParamsHandling="preserve"
                replaceUrl="true"
                routerLink="history"
                routerLinkActive="active"
                sqxTourStep="history"
                title="i18n:common.history"
                titlePosition="left">
                <i class="icon-time"></i>
            </a>
            <a
                class="panel-link"
                attr.aria-label="{{ 'common.help' | sqxTranslate }}"
                queryParamsHandling="preserve"
                replaceUrl="true"
                routerLink="help"
                routerLinkActive="active"
                sqxTourStep="help"
                title="i18n:common.help"
                titlePosition="left">
                <i class="icon-help2"></i>
            </a>
        </div>
    </ng-template>
</sqx-layout>
<router-outlet></router-outlet>
